xinkeaboard/xinkeaboard-web/pages/goods/list/[...slug].vue

<template>
  <div>
    <SldHomeTopSearch />
    <NavCatHeader />
  <div class="bottom_line"></div>
  <div class="goods_list_container self_background">
    <!-- 分类路径 -->
    <div class="level_nav_main">
      <div class="level_item" v-if="catePathName.path.length">
        <!-- 一级分类，显示该部分 -->
        <template v-if="1 === showIndex">
          <div class="level_nav_item">
            <a class="level_link">{{ catePathName.path[0] }}</a>
          </div>
          <!-- <i class="level-right"></i> -->
          <div class="level_nav_item">
            <div class="menu_drop">
              <div :class="{ trigger: true, hasChild: cate1.cate.length }">
                <span class="trigger_name">{{L['全部分类']}}</span>
                <i class="menu_drop_arrow"></i>
              </div>
              <div class="menu_drop_main" v-if="cate1.cate.length">
                <ul class="menu_drop_list">
                  <li
                    v-for="(
                      { categoryName, categoryId, grade, pid }, index
                    ) in cate1.cate"
                    :key="index"
                  >
                    <router-link
                      :to="'/goods/list/'+ calcProductName(categoryName) +'_v-'+ categoryId + '_gid-' + grade + '_pid-' + pid"
                    >
                      {{ categoryName }}</router-link
                    >
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </template>

        <!-- 进入二级分类路径下的页面时，显示该部分 -->
        <template v-else-if="2 === showIndex">
          <div class="level_nav_item">
            <div class="menu_drop">
              <div :class="{ trigger: true, hasChild: cate1.cate.length }">
                <span class="trigger_name">{{ catePathName.path[0] }}</span>
                <i class="menu_drop_arrow"></i>
              </div>
              <div class="menu_drop_main" v-if="cate1.cate.length">
                <ul class="menu_drop_list">
                  <li
                    v-for="(
                      { categoryName, categoryId, grade, pid }, index
                    ) in cate1.cate"
                    :key="index"
                  >
                    <router-link :to="'/goods/list/'+ calcProductName(categoryName) +'_v-'+ categoryId + '_gid-' + grade + '_pid-' + pid">
                      {{ categoryName }}</router-link>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <i class="level-right"></i>
          <div class="level_nav_item">
            <div class="menu_drop">
              <div :class="{ trigger: true, hasChild: cate2.cate.length }">
                <span class="trigger_name">{{ catePathName.path[1] }}</span>
                <i class="menu_drop_arrow"></i>
              </div>
              <div class="menu_drop_main" v-if="cate2.cate.length">
                <ul class="menu_drop_list">
                  <li v-for="(item2, index) in cate2.cate" :key="index">
                    <Nuxt-link  :to="'/goods/list/'+ calcProductName(item2.categoryName) +'_v-'+ item2.categoryId + '_gid-' + item2.grade + '_pid-' + item2.pid"  >
                      {{ item2.categoryName }}
                    </Nuxt-link>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </template>

        <!-- 进入三级分类路径下的页面时，显示该部分 -->
        <template v-else>
          <div style="float: left">
            <div class="level_nav_item">
              <div class="menu_drop">
                <div :class="{ trigger: true, hasChild: cate1.cate.length }">
                  <span class="trigger_name">{{ catePathName.path[0] }}</span>
                  <i class="menu_drop_arrow"></i>
                </div>
                <div class="menu_drop_main" v-if="cate1.cate.length">
                  <ul class="menu_drop_list">
                    <li
                      v-for="(
                        { categoryName, categoryId, grade, pid }, index
                      ) in cate1.cate"
                      :key="index"
                    >
                      <Nuxt-link  :to="'/goods/list/'+ calcProductName(categoryName) +'_v-'+ categoryId + '_gid-' + grade + '_pid-' + pid"  >
                        {{ categoryName }}
                      </Nuxt-link>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <i class="level-right"></i>
            <div class="level_nav_item">
              <div class="menu_drop">
                <div :class="{ trigger: true, hasChild: cate2.cate.length }">
                  <span class="trigger_name">{{ catePathName.path[1] }}</span>
                  <i class="menu_drop_arrow"></i>
                </div>
                <div class="menu_drop_main" v-if="cate2.cate.length">
                  <ul class="menu_drop_list">
                    <li
                      v-for="(
                        { categoryName, categoryId, grade, pid }, index
                      ) in cate2.cate"
                      :key="index"
                    >
                      <Nuxt-link  :to="'/goods/list/'+ calcProductName(categoryName) +'_v-'+ categoryId + '_gid-' + grade + '_pid-' + pid" >
                        {{ categoryName }}
                      </Nuxt-link>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <i class="level-right"></i>
            <div class="level_nav_item">
              <div class="menu_drop">
                <div :class="{ trigger: true, hasChild: cate3.cate.length }">
                  <span class="trigger_name">{{ catePathName.path[2] }}</span>
                  <i class="menu_drop_arrow"></i>
                </div>
                <div class="menu_drop_main" v-if="cate3.cate.length">
                  <ul class="menu_drop_list">
                    <li v-for="(item3, index) in cate3.cate" :key="index">
                      <Nuxt-link  :to="'/goods/list/'+ calcProductName(item3.categoryName) +'_v-'+ item3.categoryId + '_gid-' + item3.grade + '_pid-' + item3.pid"  >
                        {{ item3.categoryName }}
                      </Nuxt-link>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </template>

        <div class="level_nav_item" style="margin-left: 10px">
          <div class="menu_drop" v-for="(item, index) in attriListTemp" :key="index">
            <div class="trigger label">
              <span class="trigger_name"
                >{{ item.name }}:&nbsp;<span color="#e2231a">{{ item.value }}</span>
              </span>
              <span @click="attriKick(index, item)">
                <i class="el-icon-close"></i>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="level_item" v-show="keyword">
        <div class="level_nav_item" style="font-size: 13px">
          <a class="level_link"
            ><i style="color: #e22319">"{{ keyword }}" &nbsp;</i>{{L['搜索结果']}}</a
          >
        </div>
      </div>
    </div>
    <div class="goods_list_banner">
      <!-- 二级分类或者三级分类的组件 -->
      <GoodsListCate2
        :cateItem="cate1.child"
        :cate2Name="catePathName.path[0]"
        v-if="showIndex === 1"
      >
      </GoodsListCate2>
      <GoodsListCate2
        :cateItem="cate2.child"
        :cate2Name="catePathName.path[1]"
        v-if="showIndex === 2"
      >
      </GoodsListCate2>
      <GoodsListCate3
        :categoryid="categoryId3"
        :pid="Pids"
        v-if="showIndex === 3"
        @attriOption="attriOption"
        @brandOption="brandOption"
        ref="goodsCate3"
      ></GoodsListCate3>
    </div>

    <div class="goods_list clearfix">
      <!-- 筛选区域 -->
      <div class="sld_screen">
        <a @click="filterSort(0)" :class="0 == indexNum ? 'btn_sort' : ''">{{
          L["综合"]
        }}</a>
        <div class="goods_type">
          {{ L["商品类型"] }}:
          <p style="cursor: pointer">
            <input
              type="checkbox"
              :value="isOwnShop"
              id="isOwn"
              @input="filterStoreSelf(isOwnShop)"
            />
            <label for="isOwn" style="cursor: pointer">{{ L["仅平台自营"] }}</label>
          </p>
        </div>
        <span class="sld_goods_num">{{ goodsData.page.total }}{{ L["件相关商品"] }}</span>
      </div>

      <!-- 商品列表 -->
      <ul :class="{ sld_goods_list: true, skeleton_sld_goods_list: firstLoading }">
        <li
          v-for="(
            {
              goodsDefaultName,
              goodsName,
              goodsImage,
              goodsPrice,
              goodsMoney,
              saleNum,
              activityList,
              isFollowGoods,
              defaultProductId,
              storeName,
              isOwnShop,
              goodsId,
              storeId,
            },
            index
          ) in firstLoading ? skeletonData.data : goodsData.data"
          :key="index"
        >
        <div>
          <div class="sld_img sld_img_center">
            <router-link
              target="_blank"
              :to="'/goods/detail/'+ calcProductName(goodsDefaultName) +'_'+ defaultProductId"
            >
              <img :src="goodsImage" alt="" />
            </router-link>
          </div>
          <div class="sld_h32_hide">
            <router-link
              class="sld_goods_name"
              target="_blank"
              :to="'/goods/detail/'+ calcProductName(goodsDefaultName) +'_'+ defaultProductId"
            >
              <span v-html="goodsName"></span>
            </router-link>
          </div>
          <p class="clearfix">
            <span class="sld_goods_price fl"><em>{{ goodsMoney == null ? 'Contact us to give you an individual quote' : goodsMoney}}</em></span>
          </p>
          <div class="sld_vendor_name">
            <router-link
              target="_blank"
              :to="'/store/'+ calcProductName(storeName) +'_'+ storeId"
              class="sld_vendor_name"
              @click.stop
            >
              <span>{{ storeName }}</span>
              <span class="el-icon-arrow-right"></span>
            </router-link>
          </div>
          <div class="tag flex_row_start_center">
            <div class="is_own" v-if="isOwnShop == 1">{{L['自营']}}</div>
            <div v-if="isOwnShop == 2" style="height:18px;"></div>
            <div
              class="tag_b"
              :class="{ tag_b_pre_sale: promotionType == 103 }"
              v-for="({ promotionName, promotionType }, index) in activityList"
              :key="index"
            >
              {{ promotionName }}
            </div>
          </div>
          <div class="op_but flex_row_start_center">
            <div
              class="but_i first flex_row_center_center"
              @click.stop="collectGoods(defaultProductId, isFollowGoods)"
            >
              <div v-if="!isFollowGoods">
                <i class="iconfont">&#xe612;</i>{{ L["收藏"] }}
              </div>
              <div v-else>
                <i><img src="/goods/collection.png" class="collection" /></i
                >{{ L["已收藏"] }}
              </div>
            </div>
            <div
              class="but_i second flex_row_center_center"
              @click.stop="addEnquiry(defaultProductId, goodsId)"
            >
              <div>
                <i
                  ><img
                    src="/email.svg"
                    alt=""
                    width="22"
                    height="21" /></i
                >{{ L["发送询盘"] }}
              </div>
            </div>
          </div>
        </div>

        </li>
      </ul>
      <SldCommonEmpty v-show="isEmpty" />
    </div>

    <!-- 分页 -->
    <div class="flex_row_center_center sld_pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        v-model:currentPage.sync="pagitionCurrent"
        :page-size="goodsData.page.pageSize"
        layout="prev, pager, next"
        :total="goodsData.page.total"
        :hide-on-single-page="true"
      >
      </el-pagination>
    </div>

    <EnquiryModal
        v-if="enquiryVis"
        :itemType="'GOODS'"
        :itemId="productId"
        @closeLoingModal="closeEnquiryModal"
      />
  </div>
  </div>

</template>

<script setup>
import { getCurrentInstance, onMounted, reactive, ref, watchEffect, watch } from "vue";
import { ElMessage,ElPagination } from "element-plus";
import { getCurLanguage } from '@/composables/common.js';
import { useFiltersStore } from "@/store/filter.js";

const filtersStore = useFiltersStore();
const proxy = getCurrentInstance();
const L = getCurLanguage();
const enquiryVis = ref(false);
const productId = ref();
//变量------------------------------
const firstLoading = ref(true); //是否第一次加载
const skeletonData = reactive({ data: [] });
const initSkeletonData = () => {
  for (let i = 0; i < 10; i++) {
    skeletonData.data.push({
      goodsDefaultName:"",
      goodsName: "",
      goodsImage: "",
      goodsPrice: "",
      goodsMoney:"",
      saleNum: "",
      activityList: "",
      isFollowGoods: "",
      defaultProductId: "",
    });
  }
};
initSkeletonData();
const route = useRoute();
const router = useRouter();
const catePath = ref([]); //导航路径
const showIndex = ref(0); //显示flag
const catePathName = reactive({ path: [] }); //需要在页面显示的整个分类路径
const params = reactive({current: 1});//初始化的请求参数
const goodsData = reactive({ data: [], page: {} });
const indexNum = ref(0);
const lowprice = ref(null);
const highprice = ref(null);
const isEmpty = ref(false);
const cate1 = reactive({ cate: {}, child: {} });
const cate2 = reactive({ cate: {}, child: {} });
const cate3 = reactive({ cate: {} });
const categoryId3 = ref( calcUrlShopId(route.path)? calcUrlShopId(route.path) : '');
const attriList = ref([]);
const attriListTemp = ref([]);
const scrollTop = ref(null);
const priceDidSel = ref(false);
const storeData = reactive({ cat: [] }); //店铺数据，cat：店铺分类，goods：店铺商品列表
const routeParams = reactive({ data: {} })
const pagitionCurrent = ref(1)
const categoryName = ref(calcMallUrlCatName(route.path))
const categoryIds = ref(calcUrlShopId(route.path))
const Gids = ref(calcMallUrlGid(route.path))
const Pids = ref(calcMallUrlPid(route.path))
const cur = ref(calcMallUrlCur(route.path))
const keyword = ref(calcMallUrlKeyword(route.path))
const brand = ref(calcMallUrlBrand(route.path))
//方法------------------------------
const clacRouteParams = () => {
  let arr = route.params.slug
  let newArr = {}
  for(let i in arr){
    newArr[arr[i].toString().split('-')[0]] = arr[i].toString().split('-')[1]
  }
  routeParams.data =  newArr
  console.log('routeParams',route.path)
  if (categoryIds.value) {
    params.categoryIds = categoryIds.value
  }
  if (cur.value) {
    params.current = cur.value;
  }
  if (keyword.value) {
    params.keyword = keyword.value;
  }
  if (routeParams.data.storeId) {
    params.storeId = routeParams.data.storeId;
  }
  if (brand.value) {
    params.brandIds = brand.value;
  }
 getInitData(params);
}

const addEnquiry = (pid,gid) => {
  productId.value = pid
  enquiryVis.value = true;
};

//关闭登录弹框
const closeEnquiryModal = () => {
  enquiryVis.value = false;
};


//初始化数据，进行请求-start
const getInitData = async (params) => {
  if (process.client) {
    window.scrollTo(0, scrollTop.value);
  }
  let searchParams = { ...params };
  let keys = ''
  if(searchParams.categoryIds){
    keys += searchParams.categoryIds
  }
  if(searchParams.keyword){
    keys += searchParams.keyword
  }
  if(searchParams.current){
    keys += searchParams.current
  }
  if(searchParams.isSelf){
    keys += searchParams.isSelf
  }
  if(searchParams.brandIds){
    keys += searchParams.brandIds
  }
  const { data: value, pending: pending } = await useFetchRaw(
    apiUrl + "v3/goods/front/goods/goodsList",
    {
      params: searchParams,
      key:keys.toString(),
      headers:{Authorization:'Bearer ' + filtersStore.getToken}
    }
  );
  const res = value._rawValue;
  if (!pending._rawValue) {
    firstLoading.value = false;
  }
  if (res.state == 200) {
    goodsData.data = res.data.list;
    isEmpty.value = res.data.list.length ? false : true;
    goodsData.page = res.data.pagination;
    showIndex.value = Number(Gids.value);
    if (categoryIds.value && Gids.value && Pids.value) {
      cateForm(categoryIds.value, Gids.value);
    }
  }
};
//初始化数据，进行请求-end



const SEOinfo = reactive({
  seoTitle: "Goods List",
  seoDesc: "",
  seoKeywords: "",
});

//根据切换数据，改变SEO
const setSEO = () => {
  for (let i in storeData.cat) {
    if (storeData.cat[i].categoryId == route.query.categoryId) {
      SEOinfo.seoTitle = storeData.cat[i].seoInfo.seoTitle;
      SEOinfo.seoDesc = storeData.cat[i].seoInfo.seoDesc;
      SEOinfo.seoKeywords = storeData.cat[i].seoInfo.seoKeywords;
      break;
    }else{
      for(let j in storeData.cat[i].children){
        if(storeData.cat[i].children[j].categoryId == route.query.categoryId){
          SEOinfo.seoTitle = storeData.cat[i].children[j].seoInfo.seoTitle;
          SEOinfo.seoDesc = storeData.cat[i].children[j].seoInfo.seoDesc;
          SEOinfo.seoKeywords = storeData.cat[i].children[j].seoInfo.seoKeywords;
        }
      }
    }
  }
  useHead({
    title: SEOinfo.seoTitle,
    meta: [
      {
        name: "description",
        content: SEOinfo.seoDesc,
      },
      {
        name: "keywords",
        content: SEOinfo.seoKeywords,
      },
    ],
  });
};


const cateForm = (c, g) => {
  if (g == 0) {
    return false;
  }
  if (g == 3) {
    let pid = Pids.value
    cateForm(pid, 2);
    return false;
  }
  let param = {
    categoryId: c,
    grade: g,
  };
  console.log(param)
  let cateId = categoryIds.value;
  get("v3/goods/front/goods/category/listByPId", param).then((res) => {
    if (res.state == 200) {
          storeData.cat = res.data;
          switch (Number(g)) {
              case 1: {
                  let cdx1 = res.data.findIndex(i => i.categoryId == c)
                  cate1.cate = res.data.filter(i => i.categoryId != c)
                  cate1.child = res.data[cdx1].children
                  catePathName.path[0] = res.data[cdx1].categoryName
                  if (Gids.value == 2 || Gids.value == 3) {
                      cate2.cate = cate1.child.filter(i => i.categoryId != cateId)
                  }
                  break;
              }
              case 2: {
                  cate2.child = res.data[0].children
                  catePathName.path[1] = res.data[0].categoryName
                  if (Gids.value == 3) {
                      let cdx3 = cate2.child.findIndex(i => i.categoryId == cateId)
                      cate3.cate = cate2.child.filter(i => i.categoryId != cateId)
                      catePathName.path[2] = cate2.child[cdx3].categoryName
                  }
                  let cate2Pid = res.data[0].pid
                  cateForm(cate2Pid, 1)
                  break;
              }
          }
          setSEO();
      }
  });
};

const categorySearch = (data, val) => {
  //遍历分类列表，找到该categoryId所在的id路径
  for (var i = 0; i < data.length; i++) {
    if (data[i] && data[i].categoryId == val) {
      return [
        {
          categoryId: val,
          categoryName: data[i].categoryName,
          children: data[i].children,
        },
      ];
    }
    if (data[i] && data[i].children) {
      var d = categorySearch(data[i].children, val);
      if (d)
        return d.concat({
          categoryId: data[i].categoryId,
          categoryName: data[i].categoryName,
          children: data[i].children,
        });
    }
  }
};
//获取分类Id数组对应的分类名--end



//页数改变的方法-start
const handleCurrentChange = (e) => {
  let path = ''
  if(!calcMallUrlCur(route.path)){
    path = route.path+'_cur-'+e
  }else{
    let arr = route.path.split('_')
    arr.pop()
    path = arr.join('_')+'_cur-'+e
  }
  router.push({
    path:path
  });
  //getInitData(params);
};


const filterSort = (index) => {
  if (indexNum.value == index) {
    return;
  }

  indexNum.value = index;
  params.current = 1;
  scrollTop.value = document.body.scrollTop || document.documentElement.scrollTop;
  let query = {};
  if (route.query.categoryId) {
    query.categoryId = route.query.categoryId;
  } else if (route.query.keyword) {
    query.keyword = route.query.keyword;
  } else if (route.query.storeId) {
    query.storeId = route.query.storeId;
  }
  if (route.query.goodsIds) {
    query.goodsIds = route.query.goodsIds;
  }
  if (route.query.brandId) {
    query.brandId = route.query.brandId;
  }

  router.push({
    path: "list",
    query: {
      ...query,
      sort: indexNum.value,
    },
  });
};
//页数改变的方法-end

//商品是否自营-start
const isOwnShop = ref(false);
const filterStoreSelf = (e) => {
  isOwnShop.value = !e;
  params.isSelf = isOwnShop.value ? 1 : 0;
  getInitData(params);
};
//商品是否自营-end

//收藏及取消收藏商品
const collectGoods = (defaultProductId, isFollowGoods) => {
  if (filtersStore.getLoginFlag) {
    //已登录
    let params = {
      productIds: defaultProductId,
      isCollect: !isFollowGoods,
    };
    post("v3/member/front/followProduct/edit", params).then((res) => {
      if (res.state == 200) {
        ElMessage.success(res.msg);
        goodsData.data.map((goodsItem) => {
          if (goodsItem.defaultProductId == defaultProductId) {
            goodsItem.isFollowGoods = !isFollowGoods;
          }
        });
      } else {
        ElMessage.error(res.msg);
      }
    });
  } else {
    //未登录提示登录
    return openLoginDialog({
      onRegister: () => {
        router.push({
          path: "/register",
        });
      },
      onForgot: () => {
        router.push({
          path: "/member/login/forget",
        });
      },
    });
  }
};

//属性选择--start
const attriOption = (attributeName, attributeValue, attributeId, attributeValueId) => {

  attriList.value.push(attributeValueId)
    attriListTemp.value.push({
        name: attributeName,
        value: attributeValue,
        type: 'attr',
        id: attributeId,
        valueId: attributeValueId
    })
    params.attributeInfo = attriList.value.join(',')
    get('v3/goods/front/goods/goodsList', params).then(res => {
        if (res.state == 200) {
            goodsData.data = res.data.list
            goodsData.page = res.data.pagination
        }

    })
};

const goodsCate3 = ref(null); //获取dom的ref,名字同名
const attriKick = (index, item) => {

  attriListTemp.value.splice(index, 1)
    if (item.type == "attr") {
        attriList.value = attriList.value.filter(subitem => subitem != item.valueId)
        proxy.refs.goodsCate3.attrSorH(item.id);
        if (attriListTemp.value.length) {
            params.attributeInfo = attriList.value.join(',')
            get('v3/goods/front/goods/goodsList', params).then(res => {
                if (res.state == 200) {
                    goodsData.data = res.data.list
                    goodsData.page = res.data.pagination
                }
            })
        } else {
            delete params.attributeInfo
            get('v3/goods/front/goods/goodsList', params).then(res => {
                if (res.state == 200) {
                    goodsData.data = res.data.list
                    goodsData.page = res.data.pagination
                }
            })
        }
    } else if (item.type == "brand") {
        delete params.brandIds
        proxy.refs.goodsCate3.brandSorH()
        get('v3/goods/front/goods/goodsList', params).then(res => {
            if (res.state == 200) {
                goodsData.data = res.data.list
                goodsData.page = res.data.pagination
            }
        })
    }


};

const brandOption = (brandId, brandName) => {
  attriListTemp.value.push({
        name: '品牌',
        value: brandName,
        type: 'brand',
    })
    params.brandIds = brandId
    get('v3/goods/front/goods/goodsList', params).then(res => {
        goodsData.data = res.data.list
        goodsData.page = res.data.pagination
    })

};
//属性选择--end

//监听事件--start
watchEffect(() => {
  if (routeParams.data.keyword != undefined) {
    // keyword.value = routeParams.data.keyword;
    // categoryId3.value = "";
    // showIndex.value = -1;
    // catePathName.path = [];
    // params.keyword = keyword.value;
    // delete params.categoryIds;
    // getInitData(params);
    // useHead({
    // title:  keyword.value,
    // });
  } else if (categoryIds) {
    categoryId3.value = categoryIds.value;
   //  keyword.value = "";
   //  params.categoryIds = categoryIds;
   //  delete params.keyword;
   // getInitData(params);
  }
});

watch(
  () => params.current,
  (nv, ov) => {
    if (nv != ov) {
      pagitionCurrent.value = Number(nv)
    }
  }
);
watch(
  () => categoryIds.value,
  (nv, ov) => {
    if (nv != ov) {
      categoryId3.value = nv;
      attriList.value = [];
      attriListTemp.value = [];
      isOwnShop.value = false;
    }
  }
);
watch(
  () => keyword.value,
  (nv, ov) => {
    if (nv != ov) {
      lowprice.value = highprice.value = null;
      isOwnShop.value = false;

    }
  }
);
//监听事件--end
router.beforeEach((to, from) => {
  if (to.path == from.path) {
    document.body.scrollTop = scrollTop.value;
  }
});

onMounted(() => {
  setTimeout(() => {
      sldStatEvent({ behaviorType: 'pv',pageUrl: defaultUrl + router.currentRoute.value.path, referrerPageUrl: apiUrl  });
    }, 3000)

  nextTick(() => {
    clacRouteParams()
  });
});

//返回值
</script>

<style lang="scss" scoped>
@import "@/assets/style/goodsList.scss";
@import "@/assets/style/base.scss";

input[type="checkbox"] {
  display: none;
  vertical-align: middle;
  margin-bottom: 3px;
  margin-right: 3px;
}

input[type="checkbox"] + label {
  background: url("/goods/unsel.png") left center no-repeat;
  padding-left: 20px;
  background-size: 12px 12px;
}

input[type="checkbox"]:checked + label {
  background-image: url("/goods/select.png");
}

.empty_page {
  flex-direction: column;
  padding: 100px;
}

.sld_pagination {
  padding: 30px 0;
}

/*添加css样式*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}
</style>